<template>
  <div
    :id="id"
    :class="className"
    :style="{ height: height, width: width }"
  />
</template>

<script>
import echarts from "echarts";
import resize from "../mixins/resize";
export default {
	mixins: [resize],
	props: {
		className: {
			type: String,
			default: "chart"
		},
		id: {
			type: String,
			default: "barChart"
		},
		width: {
			type: String,
			default: "200px"
		},
		height: {
			type: String,
			default: "200px"
		},
		companyData:{
			type: Array,
			default: []
		}
	},
	watch: {
		companyData(val) {
			let xArr = []
			for(const v of val){
				xArr.push(v.area)
			}

			val.map(v => {
				this.$set(v,'name',v.area)
				this.$set(v,'value',v.number)
				return v
			})
			this.chartInit(xArr,val);

		}
	},
	data() {
		return {
			chart: null,
			option: null
		};
	},
	mounted() {
		// setTimeout(() =>{
		// 	this.chartInit();
		// }, 600)
	},
	methods: {
		chartInit(xArr,data) {
			this.chart = echarts.init(document.getElementById(this.id));
			this.option = {
				color: ["#3398DB"],
				tooltip: {
					trigger: "axis",
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: "3%",
					right: "4%",
					bottom: "3%",
					containLabel: true
				},
				xAxis: [
					{
						// show: false,
						type: "category",
						data: xArr,//["某某区", "某某区", "某某区", "某某区", "某某区", "某某区", "某某区"],
						interval: 0,
						axisLabel: {
							color: "#fff",
							show: INFO_BAR_XASIX,
							rotate: 60,
							fontSize: 8
						},
                        axisTick: {
                            show:false
                        },
						axisLine: {
                            show:false,
							lineStyle: {
								color: "#fff"
							}
						}
					}
				],
				yAxis: [
					{
                        type: "value",
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show:false
                        },
						axisLabel: {
                            show:false,
							color: "#fff"
						},
						axisLine: {
                            show:false,
							lineStyle: {
								color: "#fff"
							}
						}
					}
				],
				series: [
					{
						name: "源数量",
						type: "bar",
						barWidth: "12",
						data: data//[10, 52, 200, 334, 390, 330, 220]
					}
				]
			};
			this.chart.setOption(this.option);
		}
	}
};
</script>

<style lang="scss" scoped></style>
